<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人所得税计算</title>
    <!--<script src="../vue.js"></script>-->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        html{
            height: 100%;
        }
        body{
            height: 100%;
            margin: 0px;
            background-color: grey;
        }
        #app{
            width: 55%;
            margin: 50px auto;
            padding: 10px;
            /*text-align: center;*/
            background-color: lightgray;
            border-radius: 5px;
        }
        #box{
            width: 100%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: lightcyan;
            border-radius: 5px;
        }
        main{
            width: 100%;
            /*text-align: center;*/
        }
        span{
            float: right;
        }
        p::after{
            content: '';
            clear: both;
            display: block;
            visibility: hidden;
            height: 0px;
        }
        .input{
            width: 25px;
            border-radius: 5px;
        }
        .text{
            width:99%;
            font-size: 18px;
            height:30px;
            margin-top: 10px;
            border-radius: 5px;
        }
        
    </style>
</head>
<body>
    <div id="app">
        <div id="box">个税计算器</div>
        <input class="text" v-model="gongzi">
        <p v-show="gongzi<1500">您的工资小于最低标准</p>
        <main v-show="gongzi>=1500">
            <p>养老保险: <input class="input" v-model='yl'>%<span class="dd">{{yanglao|currency}}</span></p>
            <!--<dd class="dd">{{yanglao|currency}}</dd>-->
            <p>医疗保险: <input class="input" v-model='yil'>%<span class="dd">{{yiliao|currency}}</span></p>
            <p>失业保险: <input class="input" v-model='sy'>% <span class="dd">{{shiye|currency}}</span></p>
            <p>住房公积金: <input class="input" v-model='zf'>%<span class="dd">{{zhufang|currency}}</span></p>
            <p>税前工资<span class="dd">{{sqgz|currency}}</span></p>
            <p>个人所得税 <span class="dd">{{sds|currency}}</span></p>
            <hr/>
            <p>税后工资<span class="dd">{{shgz|currency}}</span></p>
            
        </main>
    </div>
</body>
<script>
    // 过滤器
    Vue.filter('currency',function(v){
        if(!v){
            return "0.00"
        }   
        return v.toFixed(2)
    })

    new Vue({
        el:'#app',
        data:{
            gongzi:4000,
            yl:8,
            yil:2,
            sy:0.5,
            zf:12,
        },
        computed:{
            // 养老
            yanglao(){
                if(this.gongzi){
                    return this.gongzi*this.yl*0.01
                }
            },
            // 医疗
            yiliao(){
                if(this.gongzi){
                    return this.gongzi*this.yil*0.01
                }
            },
            // 失业
            shiye(){
                if(this.gongzi){
                    return this.gongzi*this.sy*0.01
                }
            },
            // 住房
            zhufang(){
                if(this.gongzi){
                    return this.gongzi*this.zf*0.01
                }
            },
            // 税前工资
            sqgz(){
                return this.gongzi*(1-this.yl*0.01-this.yil*0.01-this.sy*0.01-this.zf*0.01)
            },
            // 个人所得税
            sds(){
                if(this.sqgz<3500){
                    return 0;
                }
                else{
                    var jsgz = this.gongzi-3500
                    if(jsgz<1500){
                        return jsgz * 0.03
                    }
                    else if(jsgz<4500){
                        return jsgz*0.1-105
                    }
                    else if(jsgz<9000){
                        return jsgz*0.2-555
                    }
                    else if(jsgz<35000){
                        return jsgz*0.25-1005
                    }
                    else if(jsgz<55000){
                        return jsgz*0.3-2755
                    }
                    else if(jsgz<80000){
                        return jsgz*0.35-5505
                    }
                    else{
                        return jsgz*0.45-13505
                    }
                }
            },
            // 税后工资
            shgz(){
                return this.sqgz - this.sds
            }
        }
        
    })
</script>
</html>